import { observer } from "mobx-react-lite";
import { Thumbnail } from "../Icon/Thumbnail";
import { DragPreviewImage, useDrag } from "react-dnd";
import { ItemTypes } from "./ItemTypes";
import { useStore } from "../../store";

const ImageItem = observer((props: any) => {
    const { resourceStore } = useStore();

    const [{ isDragging }, drag, preview] = useDrag(
        () => ({
            type: ItemTypes.ImageItem,
            item: { index: props.index },
            collect: (monitor) => ({
                isDragging: !!monitor.isDragging(),
            }),
        }),
        [],
    );

    return (
        <>
            <DragPreviewImage connect={preview} src={resourceStore.resources[props.index].url} />
            <div ref={drag}
                className={props.className}
                onClick={(e) => props.clickHandler(e, props.index)}
                onMouseEnter={(e) => props.itemMouseEnterHandler(e, props.index)}
                onMouseLeave={props.itemMouseLeaveHandler}
            >
                <span className='w-5 h-5'></span>
                <Thumbnail></Thumbnail>
                <span className='ml-2'>{props.name}</span>
            </div>
        </>
    );

});

export { ImageItem };